<template>
	<view class="yealuo-select">
		<view class="yealuo-background" @tap="isShow=false" v-show="isShow"></view>
		<view class="yealuo-con" :style="inputStyle" @tap='isShow=isShow?false:nowData.length'>
			<slot name='left'></slot>
			<input :disabled="theDisabled" :placeholder="placeholder" v-model="theValue" @input="theInput"
				@focus="theFocus" @blur="theBlur" autocomplete="off" />
			<slot name='right' v-if="selectIco">
				<svg class="icon" v-if="!isShow"
					style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;"
					viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="530">
					<path
						d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z"
						p-id="531"></path>
				</svg>
				<svg class="icon" v-else
					style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;"
					viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1927">
					<path
						d="M904.533333 674.133333l-362.666666-362.666666c-17.066667-17.066667-42.666667-17.066667-59.733334 0l-362.666666 362.666666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733333 0L512 401.066667l332.8 332.8c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866666-12.8c17.066667-17.066667 17.066667-42.666667 0-59.733334z"
						p-id="1928"></path>
				</svg>
			</slot>
		</view>
		<view class="yealuo-select" v-show="show" :style="selectStyle">
			<view class="data">
				<radio-group v-if="checkType=='radio'" @change="selectCheckbox">
					<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData" :key="index">
						<label class="item-text" :class="{active: theValue==item.value}">
							<radio name="name1" checked v-if="theValue==item.value" :value="item.value+'|'+item.id">
							</radio>
							<radio name="name1" v-else :value="item.value+'|'+item.id"></radio>
							{{item.value}}
						</label>
					</view>
				</radio-group>
				<checkbox-group v-else-if="checkType=='checkbox'" @change="selectCheckbox">
					<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData" :key="index">
						<label class="item-text" :class="{active: theValue.indexOf(item.value)!=-1 }">
							<checkbox name="name1" checked v-if="theValue.indexOf(item.value)!=-1 "
								:value="item.value+'|'+item.id"></checkbox>
							<checkbox name="name1" v-else :value="item.value+'|'+item.id"></checkbox>
							{{item.value}}
						</label>
					</view>
				</checkbox-group>
				<radio-group v-else @change="selectCheckbox">
					<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData" :key="index">
						<label class="item-text" :class="{active: theValue==item.value}">
							<radio name="name1" style="display: none;" checked v-if="theValue==item.value"
								:value="item.value+'|'+item.id"></radio>
							<radio name="name1" style="display: none;" v-else :value="item.value+'|'+item.id"></radio>
							{{item.value}}
						</label>
					</view>
				</radio-group>
			</view>
			<view class="item-close" @tap="isShow=false">收起</view>
		</view>
	</view>
</template>

<script>
	/**
	 * v1.0.3
	 * 最后修改: 2021.02.02
	 * 创建: 2020.9.30
	 * Author:yealuo.com
	 * contact:470797533@qq.com
	 */
	let fontUnit = 'upx'
	// #ifdef MP-WEIXIN
	fontUnit = 'rpx'
	// #endif
	export default {
		name: 'yealuoInputs',
		props: {
			placeholder: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			checkType: {
				type: String,
				default: ''
			},
			itemKey: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '600'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			inputStyle: {
				type: String,
				default: ''
			},
			selectStyle: {
				type: String,
				default: ''
			},
			overflow: {
				type: String,
				default: 'auto'
			},
			tags: {
				type: String,
				default: ''
			},

			binData: {
				type: Array,
				default: ''
			},
			selectIco: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				odData: this.binData,
				nowData: this.binData,
				isShow: false,
				theValue: this.value,
				theDisabled: this.disabled
			}
		},
		watch: {
			value(val) {
				this.theValue = val;
			},
			//监听数据变化
			nowData: {
				handler: function() {
					this.nowData = this.binData;
				},
				deep: true
			}

		},
		computed: {
			show() {
				return this.isShow && this.nowData.length
			}

		},
		methods: {
			//获取焦点
			theFocus(e) {
				this.nowData = this.odData;
			},
			//失去焦点
			theBlur(e) {
				this.$emit('blur', e)
			},
			//获取输入值
			theInput(e) {
				var val = e.detail.value;
				let data = [];
				var odData = this.odData;
				for (var i = 0; i < odData.length; i++) {
					var isHas = false;
					if (odData[i].value.indexOf(val) != -1) {
						data.push(odData[i])
						if (odData[i].value == val) {
							isHas = true;
							var arr = [];
							arr.push(odData[i].value + "|" + odData[i].id)
							this.$emit('getBackVal', arr);
						}
					}
					if (!isHas) {
						var arr = [];
						arr.push(val)
						this.$emit('getBackVal', arr);
					}
				}
				this.nowData = data;
			},
			//下拉选中
			selectCheckbox(e) {
				var val = e.target.value;
				var str = val;
				if (typeof(str) != "string") {
					str = "";
					for (var i = 0; i < val.length; i++) {
						var vt = val[i].split("|");
						str += i > 0 ? "," + vt[0] : vt[0];
					}
				} else {
					this.isShow = false;
					str = str.split("|")[0];
				}
				this.$emit('getBackVal', val + "|" + this.tags)
				this.theValue = str;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: uniicons;
		src: url('/static/uni.ttf');
	}
	/**
	 * 这里是uni-app内置的常用样式变量
	 *
	 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
	 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
	 *
	 */
	
	/**
	 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
	 *
	 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
	 */
	
	/* 颜色变量 */
	
	/* 行为相关颜色 */
	$uni-color-primary: #007aff;
	$uni-color-success: #4cd964;
	$uni-color-warning: #f0ad4e;
	$uni-color-error: #dd524d;
	
	/* 文字基本颜色 */
	$uni-text-color:#333;//基本色
	$uni-text-color-inverse:#fff;//反色
	$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
	$uni-text-color-placeholder: #808080;
	$uni-text-color-disable:#c0c0c0;
	
	/* 背景颜色 */
	$uni-bg-color:#ffffff;
	$uni-bg-color-grey:#f8f8f8;
	$uni-bg-color-hover:#f1f1f1;//点击状态颜色
	$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
	
	/* 边框颜色 */
	$uni-border-color:#e5e5e5;
	
	/* 尺寸变量 */
	
	/* 文字尺寸 */
	$uni-font-size-sm:24rpx;
	$uni-font-size-base:28rpx;
	$uni-font-size-lg:32rpx;
	
	/* 图片尺寸 */
	$uni-img-size-sm:40rpx;
	$uni-img-size-base:52rpx;
	$uni-img-size-lg:80rpx;
	
	/* Border Radius */
	$uni-border-radius-sm: 4rpx;
	$uni-border-radius-base: 6rpx;
	$uni-border-radius-lg: 12rpx;
	$uni-border-radius-circle: 50%;
	
	/* 水平间距 */
	$uni-spacing-row-sm: 10px;
	$uni-spacing-row-base: 20rpx;
	$uni-spacing-row-lg: 30rpx;
	
	/* 垂直间距 */
	$uni-spacing-col-sm: 8rpx;
	$uni-spacing-col-base: 16rpx;
	$uni-spacing-col-lg: 24rpx;
	
	/* 透明度 */
	$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
	
	/* 文章场景相关 */
	$uni-color-title: #2C405A; // 文章标题颜色
	$uni-font-size-title:40rpx;
	$uni-color-subtitle: #555555; // 二级标题颜色
	$uni-font-size-subtitle:36rpx;
	$uni-color-paragraph: #3F536E; // 文章段落颜色
	$uni-font-size-paragraph:30rpx;

	.yealuo-select {
		max-width: 100%;
		position: relative;
	
	.yealuo-background {
			position: fixed;
			top: 0;
			left: 0;
			width: 750upx;
			height: 100%;
		}

		.yealuo-con {
			display: flex;
			align-items: center;
			justify-content: center;

			input {
				flex: 1;
				margin: 0 6upx;
			}
		}

		.yealuo-select {
			border: 1px solid #f3f3f4;
			position: absolute;
			z-index: 999;
			background: #fff;
			width: 100%;

			.data {
				max-height: 600upx;
				padding: 10upx;
				overflow: auto;

				.select-item {
					width: 100%;
					color: #666;

					.item-text {
						width: 100%;
						display: block;
					}

					.active {
						font-weight: bold;
					}
				}

				.item-auto {
					overflow: auto;

					.item-text {
						width: max-content;
					}
				}

				.item-hide .item-text {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.item-close {
				padding: 20upx;
				text-align: center;
				font-size: 32upx;
				border-top: 1px solid #f3f3f4;
				color: #8F8F94;
			}
		}
	}
	
</style>
